<template>
  <div class="d-select">
    <van-field v-bind="$attrs" @click="showPicker = true" :value="value" />
    <van-popup class="popup" v-model="showPicker" round position="bottom"  get-container="body">
      <van-picker show-toolbar :columns="columns" @cancel="showPicker = false" @confirm="onConfirm" />
    </van-popup>
  </div>
</template>

<script>
export default {
  name: "DSelect",
  model: {
    prop: 'value',
    event: 'change'
  },
  props: {
    value: { type: String, default: '' }
  },
  data() {
    return {
      showPicker: false,
      columns: ['杭州', '宁波', '温州', '绍兴', '湖州', '嘉兴', '金华', '衢州']
    }
  },
  emits: ['change'],
  methods: {
    onConfirm(value) {
      this.$emit('change', value);
      this.showPicker = false
    }
  }
}
</script>

<style lang="scss" scoped>
  .d-select {
  }
</style>